<template>
  <div class="app-container">
    <p class="tit">平台咨询</p>
    <div class="box">
      <p class="c_1">{{flag?'请编辑当下信息':'请填写相关信息'}}</p>
      <div class="biaoti">
        <span>文章标题<span class="aab">*</span></span>
        <input style="color:black" v-model="title" placeholder="请输入文章标题" type="text">
      </div>
      <div class="fengmian">
        <span>文章封面<span class="aab">*</span></span>
        <div class="form">
          <div class="formdata">
            <Formdata />
          </div>
        </div>
        <p class="p">只能上传jpg/png文件，且不过超过500kb</p>
      </div>
      <div class="biaoti">
        <div class="le_f">
          <p class="aab2">文章描述<span class="aab">*</span></p>
        </div>
        <!-- <input  class="miaoshu" style="color:black" v-model="description" placeholder="请输入文章描述" type="text"> -->
        <div class="ri_r">
          <textarea class="miaoshu"  v-model="description" name="" id="" ></textarea>
        </div>
      </div>
      <div class="biaoti">
        <span>文章内容<span class="aab">*</span></span>
        <div class="mkdown">
          <!-- <Markdown /> -->
        </div>
      </div>
      <div class="bottom_btn">
        <span @click="addOr()" class="boo_a">立即添加</span>
        <span class="boo_b">取消</span>
      </div>
    </div>
  </div>
</template>

<script>

import Formdata from '@/components/Formdata'
import Markdown from '@/components/Markdown'
export default {
  name: "advisory",
  components:{
    Formdata,
    Markdown
  },
  data(){
    return{
      flag:false,
      dataType:{},
      description:"",
      title:""
    }
  },
  mounted() {
    if(this.$route.query.id){
      this.flag = true
      let a = this.$store.state.user.zixun.data;
      let data = a.filter(item=>item.id==this.$route.query.id)
      this.dataType=data
      this.description=this.dataType[0].description
      this.title=this.dataType[0].title
    }else{
      this.flag=false
    }
    console.log(this.flag);
  },
  methods: {
    addOr(){
      if(this.flag){
        //提交编辑后的内容
        
      }else{
        //添加数据

      }
    }
  },
}
</script>

<style scoped>
.boo_a{
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid #eaeaea;
  color: #fff;
  background-color: #38A28A;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}
.boo_b{
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid #eaeaea;
  color: #000;
  border-radius: 3px;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
.bottom_btn{
  margin-top: 30px;
}
.le_f{
  float: left;
}
.ri-r{
  float:right
}
.aab2{
  margin-top: 40px;
}
.aab{
  color:red;
  margin-left:4px;
}
.miaoshu{
  height: auto;
  width: 380px;
  height: 100px;
  padding: 10px;
  border: 2px solid #C1C2C5;
  border-radius: 5px;
  margin-left: 10px;
  overflow-x:hidden
}
.miaoshu::-webkit-scrollbar {
  width: 8px;
  }
/* 滚动条的设置 */
.miaoshu::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px #bbb;
}
.p{
  font-size: 12px;
  margin-left: 82px;
  margin-bottom: 10px;
}
.tit{
  color: #55CA7D;
  font-size: 16px;
  padding-bottom: 50px;
}
.c_1{
  font-size: 17px;
  font-weight: bold;
  padding-bottom: 30px;
}
.biaoti input{
  width: 380px;
  height: 40px;
  padding-left: 10px;
  border: 2px solid #C1C2C5;
  border-radius: 5px;
  margin-left: 20px;
  color:  #C1C2C5;
  margin-top: 10px;
  overflow: hidden;
}
.biaoti{
  margin-top: 20px;
}
.box span{
  font-size: 14px;
}
.form{
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px dashed #bbb;
  background: #eaeaea;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.formdata{
  margin-top: 33px;
  margin-left: 18px;
}
</style>
